import { useEffect, useState, useRef } from 'react'
import { Outlet } from 'react-router-dom'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $, $http, $fn, $config } = window
/* -------------------------------------------------------- Async Component -- */
import CreateSqlTable from '../_config/create-sql-table'
const SeaqlMigrations = $lazy.hook(()=>import('./opt/seaql_migrations'))
const TableComponent = $lazy.hook(()=>import('./opt/table'))
const Page = $lazy.load(()=>import('#tp/content/page-content'))
/* -------------------------------------------------------- Page Component -- */
const Index = () => {
	const tableRef = useRef()
	const recordRef = useRef()
	const [info, setInfo] = useState({ title:'', database:'' })
	const [url, setUrl] = useState( $config.api() )
	useEffect(()=>{
		$http.pull(null, 'project/info', { loading:true }).then( d => {
			if( d ) {
				setInfo(d)
				setUrl(d.api)
			}
		} )
	},[])
	const onRefresh = () => {
		$.ref($.ref(tableRef)).tableRef().refresh()
		$.ref($.ref(recordRef)).tableRef().refresh()
	}
	const onMigration = api => {
		$http.post(null,`${url}db/sea_orm/migration/${api}`).then(()=>{
			$fn.msg.success('生成表成功')
			onRefresh()
		})
	}
	const onEntity = callback => {
		$http.post(null,`${url}db/sea_orm/migration/entity`).then(()=>{
			$fn.msg.success('数据模型生成成功')
			callback?.()
		})
	}
	const onSeaOrmCli = name => {
		$http.post(null,`${url}db/sea_orm/migration/cli`, { param:{ name } }).then(()=>{
			$fn.msg.success('操作成功')
		})
	}
	const controls = [
		{ mode:'dropdown', ghost:1, label:'安装 sea-orm-cli', data:[
			{ mode:'click', label:'mysql', click: () => onSeaOrmCli('mysql') },
			{ mode:'click', label:'sqlite', click: () => onSeaOrmCli('sqlite') },
			{ mode:'click', label:'postgres', click: () => onSeaOrmCli('postgres') }
		]},
		{ label:'生成表 seaql_migrations 表', click: () =>{
			// $http.post(null,`${url}db/sea_orm/migration/install`).then(()=>{
			// 	$fn.msg.success("seaql_migrations 生成成功")
			// })
			$http.post(null,'mysql/create_migration', { param:{ database:info.database } }).then(()=>{
				$fn.msg.success('【seaql_migrations】表生成成功')
			})
		}},
		// { label:'创建表', ghost:1, toNext:'/create-table' },
		{ mode:'click', label:'生成表', ghost:1, click: () => onMigration('up') },
		// { mode:'dropdown', ghost:1, label:'Migration', data:[
		// 	{ mode:'click', label:'生成表', click: () => onMigration('up') },
		// 	{ mode:'click', label:'清空生成表', click: () => onMigration('fresh') },
		// 	{ mode:'click', label:'回滚生成表', click: () => onMigration('refresh') },
		// 	{ mode:'click', label:'清空上次表', click: () => onMigration('down') },
		// 	{ mode:'click', label:'清空表', click: () => onMigration('reset') },
		// ]},
		{ label:'生成 Entity', ghost:1, click:()=>onEntity()},
		{ label:'创建空表', mode:'formModal', r:1, config:CreateSqlTable({ database: info.database, onRefresh })},
		{ mode:'refresh' }
	]
	return (
		<>
			<Page title={ info?.title + ' - ' + info?.database ?? '表管理' } controls={controls}>
				<div className='fx ex' style={{gap:10}}>
					<div className='ex fv rel'>
						{
							info?.database && <SeaqlMigrations dbRef={tableRef} ref={recordRef} database={info.database} onEntity={onEntity} folder={info.folder}/>
						}
					</div>
					<div className='fv rel ex'>
						{
							info?.database && <TableComponent dbRef={recordRef} ref={tableRef} database={info.database} folder={info.folder}/>
						}
					</div>
				</div>
			</Page>
			<Outlet />
		</>
	)
}
export default Index